<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——基础选择器</title>
    <style>
        *{
        }
    </style>
</head>
<body>
<div>
    <h1 style="color: cadetblue" id="today">今天是星期一</h1>
    <h2 class="word">你好~世界~</h2>
    <p>
        <span>哈哈哈</span>
    </p>
</div>

<!--引入Jquery-->
<script src="../../js/jquery-3.3.1.js"></script>

<!--id选择器-->
<script>
    /**
     * 使用原生的js的方式
     */
    document.getElementById("today").style.color = "red";
    /**
     * 使用Jquery的方式来修改颜色
     */
    $('#today').css("color", "yellow");

</script>

<!--使用class选择器-->
<script>
    /**使用js的写法
     * getElementsByClassName得到的是一个数组
     */
    let elementsByClassName = document.getElementsByClassName("word");
    elementsByClassName[0].style.color = "red";
    // $('.word').css("color","blue")
    //使用jquery的写法
    console.log("得到内容（class选择器）：" + $('.word').html())
</script>


<!--标签选择器-->
<script>
    /** 原生的js方式
     * getElementsByTagName得到一个数组
     */
    document.getElementsByTagName("span")[0].style.color = "red";

    /**
     * Jquery的写法
     */
    $("span").css("color", "blue")
</script>


<!-- 全选选择器-->
<script>
    let dom_obj = $('*');
    console.log("整个属性的jquery对象是："+dom_obj)
</script>



<!-- 复合选择器-->
<script>
    $("span,#today").css("font-size","250px")
</script>

</body>
</html>